<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="teamShow-box flex">
		<view class="comment-box">
			<scroll-view scroll-y="true" class="scroll-Y">
				<text class="title">参与评论</text>
				<view class="team-info flex-row-center w100">
					<image :src="groupInfo.mainImg" class="tema-img" mode="aspectFill"></image>
					<view class="info-content">
						<text class="team-name">{{groupInfo.title}}</text>
						<text class="team-details">{{groupInfo.describe}}</text>
					</view>
				</view>
				<view class="from-system">
					<!-- style="margin-bottom: 32rpx	;" -->
					<text class="name">评论内容</text>
					<view class="" style="height: 32rpx;"></view>
					<view class="from-box">
						<up-textarea border="none" placeholderClass="placeholderClass" v-model="commentInfo.comment"
							class="" placeholder="请输入内容" count></up-textarea>
						<!-- 上传图片 -->
						<view style="margin-top: 24rpx;">
							<up-upload @delete="deletePic" :fileList="fileList" @afterRead="afterRead" name="1" multiple
								:maxCount="9" width="200rpx" height="200rpx">
								<view class="upload-box flex-center">
									<up-icon name="camera" color="#999999" size="70rpx"></up-icon>
									<text class='text'>添加照片</text>
								</view>
							</up-upload>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
		<view class="submit-btn">
			<up-button text="立即评论" @click="submitComment" :loading="commentInfo.loading" loadingText="提交中"
				:customStyle="{color:'#18625C',fontSize:'34rpx',fontWeight:'bold',height:'100rpx'}"
				color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		formatDate
	} from '@/utils/utools.js'
	const sexIndex = ref('男');
	const props = defineProps({
		groupInfo: {
			default: null
		}
	})
	const emit = defineEmits(['closeComment'])
	const fileList = ref([]);
	const groupInfo = ref(computed(() => props.groupInfo));
	const commentInfo = reactive({
		image: '',
		comment: '',
		loading: false,
		tid: groupInfo.value.groupId,
		pid: 0
	})
	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	};
	const afterRead = async (event) => { //上传图片
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await $Api.uploadFile.uploadFilePromise(lists[i].url);
			if (result.code == '1') {
				let item = fileList.value[fileListLen];
				fileList.value.splice(fileListLen, 1, {
					...item,
					status: 'success',
					message: '',
					url: result.data.fullurl,
				});
			} else {
				let item = fileList.value[fileListLen];
				fileList.value.splice(fileListLen, 1, {
					...item,
					status: 'failed',
					message: '上传失败',
				});
			}
			fileListLen++;
		}
	}
	const submitComment = async () => { //提交评论
		if (commentInfo.loading) return
		if (!commentInfo.comment) {
			uni.$u.toast('请填写评论')
			return
		}
		let imageList = []
		fileList.value.forEach(val => {
			if (val.status == 'success') {
				imageList.push(val.url)
			}
		})
		const imageStr = imageList.join(',');
		commentInfo.loading = true;
		const res = await $Api.group.submitComment({
			comment: commentInfo.comment,
			image: imageStr,
			tid: groupInfo.value.groupId,
			pid: 0
		})
		if (res.code == 1) {
			uni.showToast({
				title: '提交成功'
			})
			setTimeout(() => {
				emit('closeComment', 1);
				commentInfo.comment='';
				fileList.value=[];
				commentInfo.loading = false;
			}, 600);
		} else {
			uni.$u.toast(res.msg)
		}

	}
</script>
<style>
	.u-textarea__count,
	.u-input,
	.u-textarea {
		padding: 0 !important;
		background-color: transparent !important;
	}

	.placeholderClass {
		color: #5B6868 !important;
		font-size: 26rpx;
		font-weight: 500;
	}

	.u-textarea__field {
		color: #fff !important;
	}
</style>
<style lang="scss" scoped>
	.teamShow-box {
		background-color: #222528;
		height: 1020rpx;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx;
		border-radius: 18rpx 18rpx 0 0;
		position: relative;

		.scroll-Y {
			height: 880rpx;

			.title {
				font-weight: bold;
				font-size: 34rpx;
				color: rgba(255, 255, 255, 0.87);
				line-height: 40rpx;
				// margin-bottom: 46rpx;
			}
		}


		.team-info {
			box-sizing: border-box;
			width: 100%;
			border-bottom: 1rpx solid #36393B;
			padding-bottom: 28rpx;
			overflow: hidden;
			margin-top: 48rpx;

			.tema-img {
				width: 124rpx;
				height: 124rpx;
				border-radius: 12rpx;
				margin-right: 18rpx;
			}

			.info-content {
				flex: 1;
				flex-direction: column;
				display: flex;
				width: 240rpx;

				.team-name {
					display: block;
					font-size: 30rpx;
					color: $title-color;
					width: 100%;
					text-overflow: ellipsis;
					white-space: nowrap;
					lines: 1;
					overflow: hidden;
				}

				.team-details {
					display: block;
					font-size: 26rpx;
					margin-top: 12rpx;
					color: $description-color;
					width: 100%;
					text-overflow: ellipsis;
					white-space: nowrap;
					lines: 1;
					overflow: hidden;
				}
			}
		}

		.from-system {
			padding: 28rpx 0;
			box-sizing: border-box;
			width: 100%;
			border-radius: 20rpx;
			background-color: #222528;
			margin-bottom: 32rpx;

			.name {
				font-weight: bold;
				font-size: 30rpx;
				color: #E2E3E3;
			}

			.marB {
				margin-bottom: 28rpx;
			}
		}

		.upload-box {
			width: 200rpx;
			height: 200rpx;
			border-radius: 8rpx;
			background-color: #36393B;
			flex-direction: column;

			.text {
				font-weight: 500;
				font-size: 24rpx;
				margin-top: 16rpx;
				color: rgba(255, 255, 255, 0.3);
			}
		}

		.submit-btn {
			width: 100%;
			// position: absolute;
			// left: 0;
			// bottom: 16rpx;
		}
	}
</style>